<template>
	<view class="canvas-board">
		<view 
			class="slide-view" 
			:style="{
				width: slideWidth + 'px',
				height: slideHeight + 'px',
				backgroundColor: currentSlideData.background
			}">
			<template v-for="(element, index) in currentSlideData.elements">
				<view 
					:key="element.id || index"
					:class="['element', {selected: selectedElement === element}]"
					:style="getElementStyle(element)"
					@click.stop="selectElement(element)">
					
					<text v-if="element.type === 'text'" class="text-element">
						{{element.content}}
					</text>
					
					<image 
						v-if="element.type === 'image'"
						:src="element.src"
						mode="scaleToFill"
						class="image-element">
					</image>
					
					<view v-if="element.type === 'shape'" class="shape-element">
						<!-- 形状元素 -->
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		slides: {
			type: Array,
			required: true
		},
		currentSlide: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			slideWidth: 900,
			slideHeight: 600,
			selectedElement: null
		}
	},
	computed: {
		currentSlideData() {
			const defaultSlide = {
				elements: [],
				background: '#FFFFFF',
				style: {}
			}
			return {
				...defaultSlide,
				...(this.slides[this.currentSlide] || {})
			}
		}
	},
	methods: {
		selectElement(element) {
			this.selectedElement = element
			this.$emit('selectElement', element)
		},
		getElementStyle(element) {
			const baseStyle = {
				position: 'absolute',
				left: element.style.left + 'px',
				top: element.style.top + 'px',
				width: element.style.width + 'px',
				height: element.style.height + 'px',
				zIndex: element.style.zIndex || 1
			}
			
			if (element.type === 'text') {
				Object.assign(baseStyle, {
					color: element.style.color || '#000000',
					fontSize: element.style.fontSize + 'px',
					fontWeight: element.style.fontWeight || 'normal',
					textAlign: element.style.textAlign || 'left'
				})
			}
			
			return baseStyle
		}
	}
}
</script>

<style lang="scss" scoped>
.canvas-board {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: auto;
	padding: 20rpx;
}

.slide-view {
	position: relative;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}

.element {
	cursor: move;
	
	&.selected {
		outline: 2px dashed $u-type-primary;
	}
}

.text-element {
	width: 100%;
	height: 100%;
	display: block;
}

.image-element {
	width: 100%;
	height: 100%;
}
</style>